import { t } from 'i18next'
import React, { forwardRef, useImperativeHandle } from 'react'
import { StyledVmpPoll } from './style'
import { Select, InputNumber, CheckBox, Button } from '@kedacom/react-next'
import PollModal from './PollModal'
import { Alert } from '@/components/Alert'
import useService from './service'
import { Avatar } from '@/pages/manager/components'
import { Poll } from '../interface'
import shallow from 'zustand/shallow'
import { useTvWallStore } from '../store'

export interface VmpPollProps {
	pollData: Poll | null
	disabled: boolean
	handleStartbatchPoll: () => void
}
export interface PollRef {
	testValue: () => boolean
	getValue: () => Poll
}
const VmpPoll = forwardRef((props: VmpPollProps, ref: React.Ref<PollRef>) => {
	const { pollData, disabled, handleStartbatchPoll } = props
	const {
		open,
		setOpen,
		pollIntervalOptions,
		pollIntervalOptionsVal,
		setPollIntervalOptionsVal,
		pollInterval,
		setPollInterval,
		unlimited,
		setUnlimited,
		planOptions,
		planValue,
		changePlan,
		pollTimes,
		setPollTimes,
		pollMembers,
		setPollMembers,
	} = useService(pollData)
	const { handleStopBatchPoll, is_batch_poll, my_used_style } = useTvWallStore(
		(state) => ({
			update: state.update,
			handleStopBatchPoll: state.handleStopBatchPoll,
			is_batch_poll: state.is_batch_poll,
			my_used_style: state.my_used_style,
		}),
		shallow
	)
	useImperativeHandle(ref, () => ({
		testValue() {
			if (my_used_style.length === 0) {
				Alert(t('请设置电视墙风格'))
				return false
			}
			if (pollIntervalOptionsVal === 0) {
				if (pollInterval === '') {
					Alert(t('请设置轮询间隔'))
					return false
				} else if (Number(pollInterval) < 5 || Number(pollInterval) > 7200) {
					Alert(t('轮询间隔应为5~7200秒'))
					return false
				}
			}
			if (!unlimited) {
				if (pollTimes === '') {
					Alert(t('请设置轮询次数'))
					return false
				} else if (Number(pollTimes) < 1 || Number(pollTimes) > 9999) {
					Alert(t('轮询次数应为1~9999次'))
					return false
				}
			}
			if (pollMembers.length === 0) {
				Alert(t('轮询列表不能为空'))
				return false
			}
			return true
		},
		getValue() {
			return {
				id: '',
				mode: 1,
				name: planValue === '0' ? '' : planOptions.find((item) => item.value === planValue)?.label ?? '',
				keep_time: pollIntervalOptionsVal !== 0 ? pollIntervalOptionsVal : Number(pollInterval),
				num: unlimited ? 0 : Number(pollTimes),
				members: pollMembers,
			}
		},
	}))
	return (
		<StyledVmpPoll className={`${disabled ? 'disabled' : ''}`}>
			<div className="title">
				<span>{t('批量轮询设置')}</span>
				{!is_batch_poll && (
					<Button onClick={handleStartbatchPoll} style={{ margin: '0 0 0 5px' }}>
						{t('开始轮询')}
					</Button>
				)}
				{is_batch_poll && (
					<Button onClick={handleStopBatchPoll} style={{ margin: '0 0 0 5px' }}>
						{t('停止轮询')}
					</Button>
				)}
			</div>
			<div className="options">
				<span className="label">{t('轮询预案')}</span>
				<Select
					width={90}
					options={planOptions}
					value={planValue}
					onClick={(e, v) => changePlan(v)}
					disabled={disabled}
				/>
			</div>
			<div className="options">
				<span className="label">{t('轮询间隔')}</span>
				<Select
					width={90}
					options={pollIntervalOptions}
					value={pollIntervalOptionsVal}
					onChange={(e, v) => {
						setPollIntervalOptionsVal(v)
						setPollInterval('5')
					}}
					disabled={disabled}
				/>
			</div>
			{pollIntervalOptionsVal === 0 && (
				<div className="options">
					<span className="label"></span>
					<div className="seconds">
						<InputNumber
							width={70}
							value={pollInterval}
							onChange={(e, v) => setPollInterval(v)}
							disabled={disabled}
							maxLength={4}
						/>
						<span className="msg">{t('5~7200秒')}</span>
					</div>
				</div>
			)}
			<div className="options" style={{ height: '36px' }}>
				<span className="label">{t('轮询次数')}</span>
				<InputNumber
					width={70}
					disabled={unlimited || disabled}
					value={pollTimes}
					onChange={(e, val) => setPollTimes(val)}
					maxLength={4}
				/>
				<span className={`${unlimited || disabled ? 'disabled' : ''} msg`}>{t('1~9999次')}</span>
			</div>
			<div className="options" style={{ height: '36px' }}>
				<span className="label"></span>
				<CheckBox
					className="unlimited"
					checked={unlimited}
					onChange={(e, val) => setUnlimited(val)}
					disabled={disabled}
				>
					{t('不限次数')}
				</CheckBox>
			</div>
			<div className="poll-list">
				<div className="list-header">
					<span>{t('已选择终端{{num}}位', { num: pollMembers.length })}</span>
					<span className={`edit ${disabled ? 'disabled' : ''}`} onClick={() => !disabled && setOpen(true)}>
						{t('编辑')}
					</span>
				</div>
				<div className="list-content">
					{pollMembers.map((item, index) => (
						<div className="list-item" key={index}>
							<Avatar value={item} />
							<span className="name" title={item.name}>
								{item.name}
							</span>
						</div>
					))}
				</div>
			</div>
			<PollModal open={open} setOpen={setOpen} data={pollMembers} callback={(data) => setPollMembers(data)} />
		</StyledVmpPoll>
	)
})
export default VmpPoll
